<template>
  <div class="wrap">
    <div class="banner">
      <div class="banner-main">
        <span class="banner-main__title">智慧应急响应</span>
        <span class="banner-main__subtitle" style="line-height:24px">
          将移动互联网、物联网、云计算技术等先进技术应用到应急管理业务中，<br/>
          为企业安全生产和政府部门监督管理提供高效实时的智能应用与服务。
        </span>
        <span class="banner-main__btn" @click="showDialog">服务咨询</span>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">方案描述</h1>
        <h6 class="model-desc">model description</h6>
        <div class="card">
          <span class="description">
            基于“物联网+大安全”的技术架构，构建统一指挥、专常兼备、反应灵敏、上下联动、平战结合的应急管理体制，实现覆盖监督管理、监测预警、指挥救援、决策支持和政务管理等五大业务域的业务应用。<br/>
            将移动互联网、物联网、云计算技术等先进技术应用到应急管理业务中，通过感知数据的统一集中管理、海量信息的智能化处理，构建一个面向服务的智慧应急管理平台，实现安全生产要素实时监控、事故隐患智能分析、智慧安全管理、应急协同指挥、培训教育考核一体化的“物联网+大安全”的创新模式，为企业安全生产和政府部门监督管理提供高效实时的智能应用与服务。<br />
          </span>
          <!-- <div align="center"><img src="@/assets/flow1.png" width="670px" /></div> -->
        </div>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">方案业务架构</h1>
        <h6 class="model-desc">Scheme business architecture</h6>
        <Streamer>
          <p style="line-height: 28px; font-size: 14px;">
            系统按照数据接入、分析预警、告警展示、态势感知功能过程进行设计其中态势感知包括网络入侵态势感知、异常流量态势感知、僵木蠕传播态势感知、高级恶意威胁检测、网站安全态势感知、系统漏洞态势感知六部分。数据接入源包括入侵检测/防护系统、流量分析系统、网站安全监测/防护系统、流量分析系统、漏洞扫描系统、未知威胁检测系统。
            <br />
            流量接入后首先经过入侵检测/防护系统处理后，Netflow数据转发到流量分析系统处理后经过底层大数据平台分析，到达态势感知平台；未识别的恶意文件转发到未知威胁检测系统，处理后经过底层大数据平台分析，到达态势感知平台。网站安全检测系统、漏洞扫描系统结果数据接入经脆弱性分析模块到达态势感知平台，由态势感知平台统一展示，整体流程如下图所示：
          </p>
        </Streamer>
        <img style="margin: 20px auto 0px; display: block;" src="@/assets/responseEmergency.jpg" width="515px" height="227px" />
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">方案技术架构</h1>
        <h6 class="model-desc">Scheme Technology Architecture</h6>
        <div class="card">
          <div align="center"><img src="@/assets/responseEmergency1.jpg" width="862px" /></div><br />
          <span class="description">
            依托电子政务云平台，在统一的云保障体系、标准规范体系、规章制度体系保障下，采用云端集中部署，省市县企及成员单位依权限全网应用模式，构建纵向从省到市、县、园区级应急管理机构，横向到安委会成员单位，前端到高危行业（领域）企业，涵盖政府、行业领域、中介机构、企业、社会公众的一体化、集约化、开放包容的架构
          </span>
        </div>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">方案优势</h1>
        <h6 class="model-desc">Scheme advantage</h6>
        <div class="row" v-for="(item, index) in list" :key="index">
          <div class="row-box" v-for="(sub, i) in item" :key="i">
            <div class="row-icon">
              <img :src="sub.icon" />
            </div>
            <h2 style="line-height: 28px">{{sub.title}}</h2>
          </div>
        </div>
      </div>
    </div>
    <div class="model">
      <div class="model-main">
        <h1 class="model-title">客户案例</h1>
        <h6 class="model-desc">model description</h6>
        <div class="card">
          <div class="card-box">
            <b style="font-weight:bold">1、	华龙网</b><br />
            云间业务负载迁移服务帮助华龙网将重要的业务系统从原来的360公共云平台迁移至重庆安全云平台。
          </div>
          <div class="card-box">
            <b style="font-weight:bold">2、 中冶集团</b><br />
            帮助中冶集团将门户网站、部分二级单位的OA、邮件等业务系统迁移至中冶云平台。
          </div>
          <div class="card-box">
            <b style="font-weight:bold">3、 华讯方舟</b><br />
            助力华讯方舟的数据中心,以及合作的电信运营商,完成大量的业务系统迁移。
          </div>  
        </div>
      </div>
    </div>
    <el-dialog title="感谢联系铝工业互联平台" :visible.sync="dialogFormVisible" width="500px">
      <el-form :model="form">
        <el-form-item label="咨询类型" :label-width="formLabelWidth">
          <el-select v-model="form.prop1" style="width:380px">
            <el-option label="方案咨询" value="value1"></el-option>
            <el-option label="优惠活动" value="value2"></el-option>
            <el-option label="售后服务" value="value3"></el-option>
            <el-option label="商务合作" value="value4"></el-option>
            <el-option label="其他" value="value5"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="咨询内容" :label-width="formLabelWidth">
          <el-input
            type="textarea"
            :rows="5"
            placeholder="请输入内容"
            v-model="form.prop2"
            ></el-input>
        </el-form-item>
        <el-form-item label="姓名" :label-width="formLabelWidth">
          <el-input v-model="form.prop3">
          </el-input>
        </el-form-item>
        <el-form-item label="手机号码" :label-width="formLabelWidth">
          <el-input v-model="form.prop4">
          </el-input>
        </el-form-item>
        <el-form-item label="邮箱" :label-width="formLabelWidth">
          <el-input v-model="form.prop5">
          </el-input>
        </el-form-item>
        <el-form-item label="所在行业" :label-width="formLabelWidth">
          <el-select v-model="form.prop6" style="width:380px">
            <el-option label="政府" value="value1"></el-option>
            <el-option label="教育" value="value2"></el-option>
            <el-option label="医疗" value="value3"></el-option>
            <el-option label="传媒" value="value4"></el-option>
            <el-option label="金融" value="value5"></el-option>
            <el-option label="互联网" value="value6"></el-option>
            <el-option label="IT" value="value7"></el-option>
            <el-option label="制造" value="value8"></el-option>
            <el-option label="能源" value="value9"></el-option>
            <el-option label="化工" value="value10"></el-option>
            <el-option label="汽车" value="value11"></el-option>
            <el-option label="物流" value="value12"></el-option>
            <el-option label="农业" value="value13"></el-option>
            <el-option label="建筑" value="value14"></el-option>
            <el-option label="服务" value="value15"></el-option>
            <el-option label="贸易" value="value16"></el-option>
            <el-option label="其他" value="value17"></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Streamer from '@/components/Streamer/Streamer'
export default {
  components: {
    Streamer
  },
  data () {
    return {
      list: [
        [
          { icon: require('@/assets/icon_01.png'), title: '构建独立开发、管理和加速的微服务架构体系，提供系统的独立部署能力，构建兼容新老系统的“云化”分布式部署的技术框架，实现“省-市-区/县-企业”的多层级、多用户的使用需求。' },
          
        ],
        [
          { icon: require('@/assets/icon_03.png'), title: '围绕应急管理工作的不同主题进行的综合分析，不仅满足常规台账报表的自动生成功能，同时围绕如何辅助应急管理工作更加智能化、人性化而进行，为应急管理工作掌握重点方向，抓住关键问题。' },
         
        ],
        [
          { icon: require('@/assets/icon_06.png'), title: '构建全域覆盖的感知网络，实现对企业全方位、立体化、无盲区动态监测与在线监控，汇集环境感知信息和监测设施信息，为多维度全面分析风险信息提供智能化决策依据。' }
        ],
        [
          { icon: require('@/assets/icon_07.png'), title: '融合各类安全监管数据构建领导驾驶舱，可视化展示企业分布、安全风险、安全隐患、监测监控和指挥救援，为监管部门提供辅助决策支撑，便于监管部门全面掌握安全生产动态。' },

        ],
        [
          { icon: require('@/assets/icon_09.png'), title: '基于工作流引擎，根据应急管理部门、人物角色等灵活设置流程节点处理，覆盖应急管理全业务的办理，实现应急管理业务过程流程化、规范化、自动化。' },
        ]
      ],
      dialogFormVisible: false,
      formLabelWidth: '80px',
      form: {
        prop1: '',
        prop2: '',
        prop3: '',
        prop4: '',
        prop5: '',
        prop6: '',
      }
    }
  },
  methods: {
    showDialog () {
      this.dialogFormVisible = true
    }
  }
}
</script>

<style lang="less" scoped>
@import '~@/style/variables.less';

.wrap {
  background-color: rgb(246, 246, 246);
}

.banner {
  width: 100%;
  height: 400px;
  background: url('~@/assets/bg1.jpg') no-repeat center 100%;
  .banner-main {
    width: 1200px;
    height: 100%;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 80px 0;
    .banner-main__title {
      font-size: 42px;
      color: #ffffff;
    }
    .banner-main__subtitle {
      font-size: 14px;
      color: #ffffff;
      margin: 20px 0;
    }
    .banner-main__btn {
      cursor: pointer;
      color: #ffffff;
      transition: all .4s;
      display: block;
      width: 138px;
      height: 39px;
      line-height: 39px;
      background: rgba(0,220,243,0.5);
      border: 1px solid #00dcf3;
      color: #ffffff;
      font-size: 14px;
      text-align: center;
      &:hover {
        background: rgba(0,220,243,0.8);
      }
    }
  }
}

.model {
  padding: 60px 0;
  .model-main {
    width: 1200px;
    margin: 0 auto;
    .card {
      .card-box {
        margin-bottom: 15px;
        line-height: 28px;
      }
    }
    .row {
      margin-right: -8px;
      margin-right: -8px;
      margin-bottom: 20px;
      &:last-child {
        margin-bottom: 0;
      }
      .row-box {
        display: flex;
        flex: 1;
        align-items: center;
        background-color: #2a3f74;
        color: #698acd;
        border: 1px #405b9f solid;
        padding: 20px;
        margin-right: 20px;
        &:last-child {
          margin-right: 0;
        }
        .row-icon {
          width: 46px;
          height: 46px;
          margin-right: 20px;
        }
      }
      .row-card {
        background: #2a3f74;
        color: #698acd;
        padding: 15px;
        padding-left: 95px;
        line-height: 28px;
        margin-bottom: 15px;
        border: 1px #405b9f solid;
      }
    }
  }
  .model-title {
    color: #403d56;
    font-size: 30px;
    font-weight: normal;
    margin: 0;
    padding: 0;
    margin-bottom: 5px;
    text-align: center;
  }
  .model-desc {
    color: #bababa;
    font-size: 14px;
    font-weight: normal;
    margin: 0 0 50px 0;
    padding: 0;
    text-align: center;
    .card{
      .description{
      line-height: 28px;
      }
    }
  }
  &:nth-child(odd) {
    background: rgb(32, 50, 96);
    .model-title {
      color: rgb(97, 145, 221);
    }
    .model-desc {
      color: rgb(70, 106, 170);
    }
  }
}

.card {
  @box_shadow();
  width: 100%;
  padding: 30px;
  background: #fff;
}
.description{
  line-height: 28px;
}

</style>
